<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body {
            background-color: black;
        }
        #canvas {
            display: block;
            margin: 0 auto;
            border: 1px solid #aaa;
        }
        #watermark-canvas {
            display: none;
            margin: 0 auto;
            border: 1px solid #aaa
        }
        #offCanvas {
            display: none;
        }
        #scale-range {
            display: block;
            margin: 20px auto;
            width: 800px;
        }
    </style>
</head>
<body>

<canvas id="canvas"></canvas>

<input type="range" id="scale-range" min="0.5" max="3.0" step="0.01" value="1.0"/>

<canvas id="watermark-canvas"></canvas>
<canvas id="offCanvas"></canvas>
<script src="./index.js"></script>
</body>
</html>